<template>
	<view>
		<template v-if=" list.length>0 ">
			<view class="shop-cart">
			<!-- 自定义导航栏 -->
			<uniNavBar 
				title="购物车" 
				:left-text=' isNavBar ?"完成":"编辑" '
				fixed="true"
				statusBar="true"
				@clickLeft=' isNavBar = !isNavBar '
				>
			</uniNavBar>
		
			<view class="bg">
				
				<view class="shop-list">
					
					<view class="shop-goods">
						<view class="shop-con">
							<image src="http://yunzhidun.oss-cn-beijing.aliyuncs.com/weixin/static/shop/shop.png" mode="widthFix" class="shop-pic"></image>
								<view class="shop-name">云支点官网商城</view>
							<image src="http://yunzhidun.oss-cn-beijing.aliyuncs.com/weixin/static/group/arrow-0.png" mode="widthFix" class="arr-pic"></image>
						</view>
						
						<!-- 商品内容 -->
						<view class="goods-list">
						
							<view class="lst" v-for='(item,index) in list' :key='index'>
								<label class="radio" @tap="selectedItem(index)">
									<radio value="" color="#ee5222" :checked="item.checked"></radio><text></text>
								</label>
								<view class="goods-con">
									<image class="goods-pic" :src="item.imgUrl" mode="widthFix"></image>
									<view class="text">
										<view class="goods-title">{{item.name}}</view>
										<view class="goods-des">{{item.des}}</view>
										<view class="goods-chooes">{{item.type}}</view>
										<view class="goods-bott">
											<view class="goods-price">￥{{item.price}}</view>
											
											<template v-if="!isNavBar">
												<view class="goods-num">X{{item.num}}</view>
											</template>
											<template v-else>
												<uniNumberBox 
													:value='item.num'
													min='1'
													@change='changeNumber($event,index)'
												>
												</uniNumberBox>
											</template>
											
										</view>
									</view>
								</view>
							</view>
						
						</view>
							
					</view>
				</view>
			</view>	
			</view>
			<!-- 底部 -->
			<view class="cart-foot">
				<label class="radio foot-radio" @tap="checkedAllFn">
					<radio value="" color="#ee5222" :checked="checkedAll"></radio><text>全选</text>
				</label>
				
				<!-- 点击编辑改变底部样式 -->
				
				<template v-if=" !isNavBar">
					<view class="cart-center">
						<view class="cart-c1">合计：</view>
						<view class="cart-c2">￥{{total.price}}</view>
					</view>
					<view class="cart-right" style="text-align: center;" @tap="payorder">结算</view>
				</template>
				
				<template v-else>
					<view class="cart-rights" style="text-align: center;" @tap="delGoodsFn">删除</view>
				</template>
				
			</view>
		</template>
		
		<template v-else>
			
			<uniNavBar title="购物车" statusBar="true"></uniNavBar>
			<view class="shop-else-list">
				囧~购物车还是空的~
			</view>
		</template>
	</view>
</template>

<script>
	import {mapState,mapActions,mapGetters,mapMutations} from 'vuex'
	import uniNumberBox from '@/components/uni/uni-number-box/components/uni-number-box/uni-number-box.vue'
	import {uniNavBar} from '@/components/uni/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue'
	export default {
		data() {
			return {
				isNavBar:false
			}
		},
		computed:{
			...mapState(
			{
				list:state=>state.cart.list
				// a:state=>state.cart.a
			}
			),
			...mapGetters(['checkedAll','totalCount'])
		},
		components:{
			uniNumberBox,
			uniNavBar
		},
		methods: {
			
			...mapActions(['checkedAllFn','delGoodsFn']),
			...mapMutations(['selectedItem']),
			changeNumber(value,index){
				this.list[index].num = value;
			},
			payorder(){
				uni.navigateTo({
					url:("/pages/shop/pay")
				})
			},
		}
	}
</script>

<style>
@import url("cart.css");
@import url("../../../common/uni.css")
</style>
